<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchObj" class="demo-form-inline">
      <el-form-item label="医院名称">
        <el-input v-model="searchObj.hosname" placeholder="医院名称" @keyup.enter.native="fetchData()"></el-input>
      </el-form-item>
      <el-form-item label="医院编号">
        <el-input v-model="searchObj.hoscode" placeholder="医院编号" @keyup.enter.native="fetchData()"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetData()">清空</el-button>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="batchRemoveDisabled" type="danger" @click="batchRemove()">批量删除</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      @selection-change="handleSelectionChange"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">{{ (page - 1) * size + scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="hosname" label="医院名称" width="180" />
      <el-table-column prop="hoscode" label="医院编号" width="160" />
      <el-table-column prop="apiUrl" label="地址" width="200" />
      <el-table-column prop="contactsName" label="联系人" />
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">{{ scope.row.status===1?'可用':'不可用' }}</template>
      </el-table-column>
      <el-table-column label="操作" width="250" align="center">
        <template slot-scope="scope">
          <router-link :to="'/yygh/hospitalSet/update/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeDataById(scope.row.id)"
          >删除</el-button>
          <el-button
            v-if="scope.row.status==1"
            type="warning"
            size="mini"
            icon="el-icon-lock"
            @click="updateStatus(scope.row.id, 0)"
          >锁定</el-button>
          <el-button
            v-else
            type="primary"
            size="mini"
            icon="el-icon-unlock"
            @click="updateStatus(scope.row.id, 1)"
          >解锁</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @current-change="fetchData"
      :current-page="page"
      :page-size="size"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import hospitalSet from "@/api/hospitalSet";

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      page: 1,
      size: 3,
      total: 0,
      searchObj: {},
      idList: [],
      batchRemoveDisabled: true,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    //多选框的切换
    handleSelectionChange(val) {
      //清空数组
      this.idList = [];

      //保存勾选行的id
      for (let i in val) {
        this.idList.push(val[i].id);
      }

      if(this.idList.length > 0){
        this.batchRemoveDisabled = false;
      }else{
        this.batchRemoveDisabled = true;
      }
    },
    //批量删除
    batchRemove() {
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //执行批量删除
          hospitalSet.batchRemove(this.idList).then((response) => {
            this.$message.success("批量删除成功");
            this.fetchData(this.page);
          });
        })
        .catch(() => {});
    },
    //锁定与解锁
    updateStatus(id, status) {
      hospitalSet.updateStatus(id, status).then((response) => {
        this.$message.success(status == 1 ? "解锁成功" : "锁定成功");
        this.fetchData(this.page);
      });
    },
    //删除
    removeDataById(id) {
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //执行删除
          hospitalSet.removeById(id).then((response) => {
            this.$message.success("删除成功");
            this.fetchData();
          });
        })
        .catch(() => {});
    },
    //清空
    resetData() {
      this.searchObj = {};
      this.fetchData();
    },
    //分页条件查询
    fetchData(page = 1) {
      //ES6写法，没有参数传入时，使用默认值1
      this.page = page;

      //分页条件查询
      hospitalSet
        .getPageList(this.page, this.size, this.searchObj)
        .then((response) => {
          this.list = response.data.list;
          this.total = response.data.total;

          //关闭加载层
          this.listLoading = false;
        });
    },
  },
};
</script>
